<template>
    <van-cell
      class="notification-item"
      ref="notificationItem"
      :to="{
        name:'notification',
        params:{
          notificationId:notification.id
        }
      }"
    >
      <template #title>
        <span class="title van-multi-ellipsis--l2">{{ notification.title }}</span>
      </template>
      <template #label>
        <span>{{ notification.users.name }}</span>-
        <span>{{ dayjs().to(dayjs(notification.createdAt)) }}</span>
        <br />
        <van-tag type="success">{{ notification.clubs.name }}</van-tag>  <br>
         <van-tag v-if="route.path!='/' &&  notification.turnUser!='true'" type="danger">社团通告</van-tag>
         <van-tag v-if="route.path!='/' && notification.turnUser=='true'" type="warning">公共通告</van-tag>
      </template>
      <template #right-icon>
        <van-image
          v-if="notification.clubs.logo"
          width="100"
          height="100"
          :src="`${url}`+notification.clubs.logo"
        />
      </template>
    </van-cell>

</template>
<script>
import { useRouter } from 'vue-router';
import dayjs from '../../utils/day.js';
import store from '../../store';
import { ref } from 'vue';
import { useRoute } from 'vue-router'
export default {
  props: {
    notification: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    const route = useRoute();

    if (route.path==='/') {

    // 从 sessionStorage 中获取之前记录的滑块位置
    const scrollY = sessionStorage.getItem('scrollY0');
    // 如果存在记录，则滚动到该位置
    if (scrollY) {
      window.scrollTo(0, parseInt(scrollY));
    }
}else{
 
}

  },
  setup() {

    const route = useRoute();


    const url = import.meta.env.VITE_APP_URL + '/common/download?name=';



    return {
      url,
      dayjs,
      route
    };
  },
};
</script>
<style>
.notification-item .title {
  font-size: 18px;
  color: #3a3a3a;
}

.notification-item .van-cell__value {
  flex: unset;
  width: 232px;
  height: 146px;
  padding-left: 25px;

}

.notification-item .right-cover {
  width: 132px;
  height: 146px;
}

.notification-item .label-info-wrap span {
  font-size: 14px;
  color: #b4b4b4;
  margin-right: 25px;
}

.notification-item .cover-wrap {
  display: flex;
}

.notification-item .cover-wrap .cover-item {
  /* 平分宽度 */
  flex: 1;
  padding-right: 4px;
}

.notification-item .van-cell__value {
  width: 200px;
}

.notification-item .label-info-wrap span {
  font-size: 14px;
  color: #b4b4b4;
  margin-right: 25px;
  word-break: break-all;
}
</style>
